<template>
  <div class="content-box" @mousemove="drag" @mouseup="dragEnd">
    <div class="content-box-right">
      <button @click="addUnit">添加单元</button>
    </div>
    <div class="content-box-left" id="unitSetting-box" :style="{ transform: `translate(-${transformNum}px)` }">
      <div :class="'unit-scroll-box' + index" class="unit-parent" v-for="(item, index) in list" :key="index">
        <div class="unit-item">
          <div
            @mousedown="dragStart($event, index, indexs)"
            :key="indexs"
            v-for="(items, indexs) in item.children"
            class="unit-item-children move-box"
            :style="{
              top: items.top + '%',
              left: items.left + '%',
              width: items.width + '%',
              height: items.height + '%',
            }"
          ></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { ref, onMounted } from 'vue';

const list = ref([
  {
    children: [{ text: '', left: 10, top: 10, width: 10, height: 10 }],
  },
]);
const transformNum = ref(0);
const addUnit = () => {
  list.value.push({});
};
const parentBox = ref(null); //父元素下标
const currentBox = ref(null); //子元素下标
const initialX = ref(null);
const initialY = ref(null);

const dragStart = (event, index, indexs) => {
  currentBox.value = indexs;
  parentBox.value = index;
};
const drag = (event) => {
  initialX.value = (event.clientX / window.innerWidth) * 100; // 计算鼠标相对于容器的 X 坐标
  initialY.value = (event.clientY / window.innerHeight) * 100; // 计算鼠标相对于容器的 Y 坐标
  if (currentBox.value || currentBox.value === 0) {
    list.value[parentBox.value].children[currentBox.value].left = initialX.value;
    list.value[parentBox.value].children[currentBox.value].top = initialY.value;
  }
};
const dragEnd = (event) => {
  console.log('抬起');
  currentBox.value = null;
};
const handleMouseWheel = (e) => {
  // 禁止页面滚动
  // e.preventDefault()
  // unit-item-item

  let documentItem = document.querySelector('.content-box-left');
  let names = '.unit-scroll-box' + (list.value.length - 1);
  let childDocument = document.querySelector(names);

  if (e.wheelDelta) {
    // 判断浏览器IE，谷歌滑轮事件
    // console.log(e.wheelDelta);
    if (e.wheelDelta > 0) {
      if (transformNum.value !== 0) {
        transformNum.value = transformNum.value - 100;
      }
    }
    if (e.wheelDelta < 0) {
      console.log('chufa', documentItem.clientWidth, childDocument.clientWidth);
      // 当滑轮向下滚动时
      if (transformNum.value >= documentItem.clientWidth - childDocument.clientWidth) {
        transformNum.value = documentItem.clientWidth - childDocument.clientWidth;
        return;
      }
      transformNum.value = transformNum.value + 100;
    }
  } else if (e.detail) {
    // Firefox滑轮事件
    if (e.detail > 0) {
      // 当滑轮向下滚动时
    }
    if (transformNum.value >= documentItem.clientWidth - childDocument.clientWidth) {
      transformNum.value = documentItem.clientWidth - childDocument.clientWidth;
      return;
    }
    if (e.detail < 0) {
      // 当滑轮向上滚动时
      transformNum.value = transformNum.value + 100;
    }
  }
};
const pathCruuentInfo = (type) => {
  //   clearTimeout(timevalue.value);
  //   timevalue.value = setTimeout(() => {
  //     // console.log('触发', type);
  //     if (type === 1) {
  //       // 下一屏
  //       if (cruuentType.value < store.styleInfo.moduleList.length + 1) {
  //         cruuentType.value = cruuentType.value + 1;
  //       } else {
  //         MessagePlugin.warning('当前为最后一个单元');
  //         return;
  //       }
  //     } else {
  //       if (cruuentType.value !== 1) {
  //         cruuentType.value = cruuentType.value - 1;
  //       } else {
  //         return;
  //       }
  //     }
  //     if (cruuentType.value === 1) {
  //       pathHome();
  //     } else {
  //       pathUnit(cruuentType.value - 2);
  //     }
  //     // cruuentType.value = 0;
  //   }, 100);
};
onMounted(() => {
  let doc = document.querySelector('.content-box');
  doc.addEventListener('wheel', handleMouseWheel, {
    passive: false,
  });
});
</script>

<style lang="less" scoped>
.content-box {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.top-box {
  width: 100vw;
  height: 64px;
}
.context-box {
}
.content-box-right {
  position: fixed;
  right: 0;
  top: 0;
  width: 300px;
  height: 100vh;
  padding: 24px;
  background: blueviolet;
  z-index: 9999;
}
.content-box-left {
  display: inline-block;
  white-space: nowrap;
  height: 100vh;
  transition: all 0.3s;
}
.unit-parent {
  display: inline-block;
  width: 100vw;
  height: 100vh;
}
.unit-item {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: red;
  span {
    color: #fff;
  }
}
.unit-item-children {
  position: absolute;
  background: chartreuse;
}
</style>
